<template>
  <div class='user-column'>
    <div v-if="columnList.length > 0">
      <div class="top" v-for="column in columnList" :key="column.id" @click="$router.push(`/column/${column.id}`)">
        <img :src="column.cover" alt="">
        <div class="right">
          <p>{{ column.title }}</p>
          <p>{{ column.description }}</p>
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="您暂无自己的专栏!"></el-empty>
    </div>
    <div class="footer">
      <el-button type="primary" plain size="medium" @click="dialogFormVisible = true">新建专栏</el-button>
    </div>
    <el-dialog title="新建专栏" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item align="center" porp="cover">
          <!-- 用来显示封面的图片 -->
          <img :src="form.cover" alt="" class="cover-img" ref="imgRef" v-if="form.cover" @click="choiceCover" />
          <img src="@/assets/cover.jpg" alt="" class="cover-img" v-else @click="choiceCover" />
          <br />
          <!-- 文件选择框，默认被隐藏 -->
          <input type="file" style="display: none;" accept="image/*" ref="iptFileRef" @change="onCoverChangeFn" />
          <!-- 选择封面的按钮 -->
          <el-button type="text" @click="choiceCover">+ 选择封面</el-button>
        </el-form-item>
        <el-form-item align="center" prop="title">
          <span style="font-size: 14px;color: #606266;line-height: 40px;">专栏名称:</span><br>
          <el-input v-model="form.title" autocomplete="off" style="width: 60%" placeholder="请输入专栏名称"></el-input>
        </el-form-item>
        <el-form-item align="center" prop="description">
          <span style="font-size: 14px;color: #606266;line-height: 40px;">专栏介绍:</span><br>
          <el-input type="textarea" v-model="form.description" autocomplete="off" style="width: 60%" placeholder="请输入专栏介绍"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conformFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserColumn, addColumn } from '@/api/column'

export default {
  name: 'MyUserColumn',
  data () {
    return {
      userId: 0,
      columnList: [],
      dialogFormVisible: false,
      form: {
        title: '',
        description: '',
        cover: ''
      },
      rules: {
        cover: [
          { required: true, message: '请选择专栏封面', trigger: ['blur', 'change'] }
        ],
        title: [
          { required: true, message: '请输入专栏名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入专栏介绍', trigger: 'blur' }
        ]
      }
    }
  },
  components: {},
  methods: {
    async getColumns () {
      const res = await getUserColumn(this.userId)
      if (res.code === 0) {
        this.columnList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    choiceCover () {
      this.$refs.iptFileRef.click()
    },
    // 封面选择改变的事件
    onCoverChangeFn (e) {
      // 获取用户选择的文件列表
      const files = e.target.files
      if (files.length === 0) {
        // 用户没有选择封面
        this.form.cover = null
      } else {
        const fr = new FileReader()
        fr.readAsDataURL(files[0])
        fr.onload = (e) => {
          this.form.cover = e.target.result
        }
      }
    },
    conformFn () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log(111)
          const res = await addColumn({ ...this.form, userId: this.$store.getters.userId })
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.dialogFormVisible = false
            this.getColumns()
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.userId = this.$route.params.userId
    this.getColumns()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.user-column {
  width: 980px;
  margin: 0 auto;
}

.top {
  height: 200px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-top: 20px;
  padding: 0 50px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }

  img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-right: 30px;
  }

  .right {
    p {
      margin: 10px 0;
      font-size: 16px;

      &:nth-child(1) {
        font-size: 24px;
      }

      &:nth-child(2) {
        color: #6c757d
      }
    }
  }
}

.footer {
  padding: 20px;
  text-align: center;

  .el-button {
    width: 300px;
  }
}

.cover-img {
  width: 160px;
  height: 160px;
  border-radius: 100%;
}

:deep(.el-form-item__error) {
  left: 20%;
}
</style>
